<template>
  <div class="text-add-page-container">
    <mu-paper :z-depth="0">
      <mu-text-field label="请输入标题" labelFloat v-model="title"/>
      <editor ref="editor"></editor>
    </mu-paper>
    <div class="text-add-page-footer">
      <mu-divider style="margin-bottom: 6px;"></mu-divider>
      <mu-button color="blue" @click="goBack()">
        <mu-icon value=":fa fa-long-arrow-left" size="20"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;返回</span>
      </mu-button>
      <mu-button color="green" @click="save()">
        <mu-icon value=":fa fa-floppy-o" size="20"></mu-icon><span style="font-family: 微软雅黑;">&nbsp;保存</span>
      </mu-button>
    </div>
  </div>
</template>

<script>
  import Editor from './Editor'
  export default {
    name: 'text-add-page',
    data() {
      return {
        title: ''
      };
    },
    methods: {
      goBack() {
        this.$router.push("/list/text");
      },
      save() {
        let title = this.$data.title;
        let content = this.$refs.editor.editorContent;
        if(!title){
          this.$toast.error("标题必填");
          return;
        }if(!content){
          this.$toast.error("内容必填");
          return;
        }
        
        this.$db.read().get('text_share').insert({
          title: title,
          content: content,
        }).write();
        
        this.$toast.success("保存成功");
      }
    },
    components: {
      Editor
    }
  }
</script>

<style>
  .text-add-page-container {
    width: 100%;
    padding: 10px;
  }

  .text-add-page-footer {
    margin-top: 45px;
    padding-top: 5px;
    border-color: darkgrey;
    border-top-width: 2px;
  }
</style>
